@charset "utf-8";
@import "common/reset";
$font-size: 20px;
@function r($px) {
    @return $px / $font-size * 1rem;
}
html,
body {
    height: 100%;
}
.web{
    section{
        .GIMClogo{
            margin-top: r(10px);
            font-size: 0;
            img{
                width: 100%;
            }
        }
        .ul_nav{
            font-size: 0;
            background: #f5f5f5;
            padding-bottom: r(21px);
           li{
               display: inline-block;
               border-bottom: 1px solid #dfdfdf;
               margin-top: r(7px);
               width: 33.3%;
               text-align: center;
               padding-bottom: r(30px);
               padding-top: r(30px);
               a{
                   font-size: r(27px);
                   color: #8b8b8b;
                   font-weight: bold;
               }
               &:hover{
                   background: #b20000;
                   a{
                       color: white;
                   }
               }
               &.active{
                   background: #b20000;
                   a{
                       color: white;
                   }
               }
            } 
        }  
        .article{
            width: 95%;
            margin: 0 auto;
            border-bottom: 1px solid #dfdfdf;
            p{
                text-indent: 2em;
                margin-top: r(28px);
                font-size: r(20px);
                color: #8b8b8b;
            }
        } 
        .video{
            width: 95%;
            margin: 0 auto;
            margin-top: r(36px);
            border-bottom: 1px solid #DFDFDF;
            padding-bottom: r(30px);
            img{
                width: 100%;
            }
        }
        .course{
            width: 95%;
            margin: 0 auto;
            background: #b20000;
            padding-bottom: r(20px);
            padding-top: r(20px);
            span{
                font-size: r(30px);
                color: white;
                margin-left: r(24px);
                vertical-align: middle;
            }
            i{
                font-size: r(40px);
                color: white;
                margin-left: r(24px);
                margin-right: r(20px);
                vertical-align: middle;
            }
        }
        .progress{
            width: 95%;
            margin: 0 auto;
            li{
               .progress_left{
                   position: relative;
                   width: r(110px);
                   height: r(107px);
                   i{
                       display: inline-block;
                       font-size: r(34px);
                       color: #d0dbdc;
                       position: absolute;
                       left: r(40px);
                       top: r(36px);
                   }
                   .xian1{
                       width: r(4px);
                       height: r(40px);
                       background: #d0dbdc;
                       position: absolute;
                       left: r(55px);
                       top: 0;
                   }
                   .xian2{
                       width: r(4px);
                       height: r(38px);
                       background: #d0dbdc;
                       position: absolute;
                       left: r(55px);
                       bottom: 0;
                   }
                   
                }
                .progress_right{
                    h4{
                        font-size: r(32px);
                        color: #313131;
                        margin-top: r(20px);
                    }
                    p{
                        font-size: r(20px);
                        color: #b20000;
                    }
                } 
                &:nth-child(2n){
                    background: #f3f3f3;
                    .progress_left{
                        i{
                            color: #b20000;
                        }
                    }
                }
            }
        }
    }
}
